<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Header from '@/components/layout/Header.vue';
import Button from '@/components/common/Button.vue';
import Input from '@/components/common/Input.vue';
import { userStore } from '@/store/user';
import { ElDialog } from 'element-plus';
import QRCode from 'qrcode';
import { getGoogleKey, bindGoogle, sendBingPhoneCode, bingTel, hasTel, updatePassword } from '@/apis/user';

import 'element-plus/es/components/dialog/style/css';
import router from '@/router';
const type = ref('1')
const time = ref<number>(0)
const timer = ref<number>(0)
const canvasEl = ref<HTMLCanvasElement | null>(null)
const code = ref('')

const getCode = () => {
    getGoogleKey().then(async (res) => {
        code.value = res
        if (canvasEl.value) {
            QRCode.toCanvas(canvasEl.value, `otpauth://totp/bit%5C:${encodeURIComponent(userStore().userInfo.mobilePhone)}?secret=${res}&issuer=bit%5C&algorithm=SHA1&digits=6&period=30`, {
                width: 170,
                height: 170,
                color: {
                    dark: '#000000',
                    light: '#ffffff'
                }
            })
        }
    })
}
const showCode = ref(false)
const showPhone = ref(false)
const showConfirm = ref(false)
const login = ref(false)
const confirmCode = ref('')
const phone = ref('')
const phoneCode = ref('')
const errorMsg = ref('')
const oldPwd = ref('')
const newPwd = ref('')
const confirmPwd = ref('')
const showOldPwd = ref(false)
const showNewPwd = ref(false)
const showConfirmPwd = ref(false)
const openCode = () => {
    showCode.value = true
    getCode()
}
const nextStep = () => {
    showCode.value = false
    showConfirm.value = true
}
const bind = () => {
    bindGoogle({
        key: code.value,
        code: confirmCode.value
    })
}
const openPhone = () => {
    phone.value = ''
    phoneCode.value = ''
    errorMsg.value = ''
    clearInterval(timer.value)
    time.value = 0
    showPhone.value = true
}
const bindPhone = async () => {
    let reg = /^1[3-9]\d{9}$/
    if (!reg.test(phone.value)) {
        errorMsg.value = '请输入正确的手机号'
        return
    }
    if (phoneCode.value.length != 6) {
        errorMsg.value = '请输入正确的验证码'
        return
    }
    errorMsg.value = ''
    try {
        await bingTel({
            tel: phone.value,
            internationalCode: '',
            code: phoneCode.value
        })
        const info = await hasTel()
        userStore().setUserInfo({ phone: info.accountName })
        showPhone.value = false
    } catch (error: any) {
        errorMsg.value = error.msg
    }
}
const getPhoneCode = async () => {
    let reg = /^1[3-9]\d{9}$/
    if (!reg.test(phone.value)) {
        errorMsg.value = '请输入正确的手机号'
        return
    }
    errorMsg.value = ''
    try {
        await sendBingPhoneCode({
            tel: phone.value,
            internationalCode: ''
        })
        if (time.value) {
            return
        }
        time.value = 60
        timer.value = setInterval(() => {
            if (time.value > 0) {
                time.value--
            } else {
                clearInterval(timer.value)
            }
        }, 1000)
    } catch (error: any) {
        errorMsg.value = error.msg
    }
}
const changePwd = async () => {
    if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/.test(oldPwd.value)) {
        errorMsg.value = '请输入8-16位密码，需同时包含字母和数字'
        return
    }
    if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/.test(newPwd.value)) {
        errorMsg.value = '请输入8-16位密码，需同时包含字母和数字'
        return
    }
    if (newPwd.value != confirmPwd.value) {
        errorMsg.value = '两次输入的密码不一致'
        return
    }
    errorMsg.value = ''
    try {
        await updatePassword({
            oldPassword: oldPwd.value,
            password: newPwd.value
        })
        userStore().loginOut()
        login.value = true
    } catch (error: any) {
        errorMsg.value = error.msg
    }
}

onMounted(async () => {
    if (router.currentRoute.value.query.type) {
        type.value = router.currentRoute.value.query.type as string
    }
})
</script>

<template>
    <div>
        <Header />
        <div class="px-[16px] sm:px-[24px] max-w-[1200px]  mx-auto mt-[24px]">
            <div class="h-[24px] flex items-center text-[#9c9c9c] hover:text-[#000] cursor-pointer mb-[24px]"
                @click="router.back()">
                <div class="iconfont icon-zuo font-bold text-[14px] mr-[6px]"></div>
                <div>账户安全</div>
            </div>
            <div class="sm:text-[32px] font-bold text-[24px] mb-[48px]">
                {{ type == '1' ? '身份验证器App' : type == '2' ? '邮箱验证' : type == '3' ? '手机验证' : '修改密码' }}
            </div>
            <template v-if="type == '1'">
                <div class="flex justify-center" v-if="!userStore().userInfo.bindGoogleAuth">
                    <div class="w-[425px] flex flex-col items-center">
                        <svg class="bn-svg sm:h-[120px] sm:w-[120px] w-[80px] h-[80px] mb-4" viewBox="0 0 96 96"
                            xmlns="http://www.w3.org/2000/svg">
                            <path opacity="0.5"
                                d="M48.001 20c-8.837 0-16 7.163-16 16a15.95 15.95 0 004.686 11.314L48.001 36V20z"
                                fill="#929AA5"></path>
                            <path opacity="0.15" fill-rule="evenodd" clip-rule="evenodd"
                                d="M12 8h72v56L48 88 12 64V8zm36.001 44c8.837 0 16-7.163 16-16s-7.164-16-16-16c-8.837 0-16 7.163-16 16s7.163 16 16 16z"
                                fill="#929AA5"></path>
                            <path d="M26 60h12v4H26v-4z" fill="#7dd3fc"></path>
                            <path opacity="0.5" d="M42 60h12v4H42v-4zM58 60h12v4H58v-4z" fill="#929AA5"></path>
                        </svg>
                        <div class="text-[20px] mb-[8px] hidden sm:block">享更快的登录速度</div>
                        <div class="text-[14px] text-[#9c9c9c] text-center mb-[40px]">
                            您可以从谷歌验证器App中获取验证码，无需等待短信验证码。即使您的手机处于离线状态，该方法也可以使用。</div>
                        <Button class="sm:block hidden w-full h-[48px] leading-[48px] text-[16px]"
                            @click="openCode">启用身份验证器App</Button>
                    </div>
                </div>
                <div v-else
                    class="p-[24px] border-solid border-[1px] border-[#ededed] rounded-[8px] flex justify-between">
                    <div class="flex">
                        <div class="iconfont icon-a-v31-24px-line-gugeyanzhengqi text-[20px] mt-[2px]"></div>
                        <div class="ml-[16px]">
                            <div>Authenticator</div>
                            <div class="text-[14px] text-[#9c9c9c] mt-[6px]">谷歌验证器已绑定</div>
                        </div>
                    </div>
                </div>
                <div class="fixed bottom-[20px] sm:hidden w-[calc(100%-52px)]"
                    v-if="!userStore().userInfo.bindGoogleAuth">
                    <Button class="h-[48px] leading-[48px] text-[16px] w-full" @click="openCode">启用身份验证器App</Button>
                </div>
            </template>
            <template v-if="type == '2'">
                <div class="p-[24px] border-solid border-[1px] border-[#ededed] rounded-[8px] flex justify-between">
                    <div class="flex">
                        <div class="iconfont icon-youxiang1 text-[20px] mt-[2px]"></div>
                        <div class="ml-[16px]">
                            <div>{{ userStore().userInfo.email }}</div>
                            <div class="text-[14px] text-[#9c9c9c] mt-[6px]">邮箱已绑定</div>
                        </div>
                    </div>
                </div>
            </template>
            <template v-if="type == '3'">
                <div class="flex flex-col items-center" v-if="!userStore().userInfo.phone">
                    <div class="w-[425px] flex flex-col items-center">
                        <svg class="bn-svg h-[120px] w-[120px] mb-4" viewBox="0 0 96 96"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M80.31 8.005A4 4 0 0184.103 12v48.94l-.006.407a12 12 0 01-6.166 10.082L50.046 86.92l-.23.118a4 4 0 01-3.425 0l-.23-.118-27.886-15.492a12 12 0 01-6.165-10.082l-.006-.407V12a4 4 0 014-4h64l.206.005zm-3.207 49.008a11 11 0 01-5.805 9.696L49 78.653v6.557l.074-.037L76.96 69.68a10 10 0 005.144-8.741V40.815h-5v16.198zm-63 3.927a10 10 0 005.144 8.74L47 85.1v-6.556L24.91 66.709a11 11 0 01-5.806-9.696V40.815h-5V60.94zm7-3.927a9 9 0 004.75 7.933L48.01 76.814h.185l22.158-11.868a9 9 0 004.75-7.933V17h-54v40.013zm-5-47.013a2 2 0 00-2 2v26.815h5V15H47v-5H16.104zM49 15h28.103v23.815h5V12a2 2 0 00-2-2H49v5z"
                                fill="currentColor"></path>
                            <path fill-rule="evenodd" clip-rule="evenodd"
                                d="M64 31a1 1 0 011 1v19.438a1 1 0 01-1 1H52.243l-3.38 5.229a1 1 0 01-1.693-.02l-3.197-5.21H32a1 1 0 01-1-1V32a1 1 0 011-1h32zM37.321 43.713a1 1 0 000 2h20.836a1 1 0 000-2H37.321zm0-6.213a1 1 0 100 2h20.836a1 1 0 000-2H37.321z"
                                fill="#7dd3fc"></path>
                        </svg>
                        <div class="text-[20px] font-bold mb-[8px]">提高账户安全性</div>
                        <div class="text-[14px] mb-[40px] text-[#9c9c9c]">手机号验证为您的提现和币安账户增加了另一层安全保护。</div>
                        <Button class="sm:block hidden w-full h-[48px] leading-[48px] text-[16px]"
                            @click="openPhone">添加手机号</Button>
                    </div>
                </div>
                <div v-else
                    class="p-[24px] border-solid border-[1px] border-[#ededed] rounded-[8px] flex justify-between">
                    <div class="flex">
                        <div class="iconfont icon-shoujihaoma1 text-[20px] mt-[2px]"></div>
                        <div class="ml-[16px]">
                            <div>{{ userStore().userInfo.phone }}</div>
                            <div class="text-[14px] text-[#9c9c9c] mt-[6px]">手机号已绑定</div>
                        </div>
                    </div>
                </div>
            </template>
            <template v-if="type == '4'">
                <div class="flex justify-center">
                    <div class="w-[425px] flex flex-col justify-center">
                        <div class="w-full box-border p-[12px] flex bg-[#fffbea] rounded-[8px]">
                            <span class="iconfont icon-info-circle text-[20px] mr-[4px] mt-[1px]"></span>
                            <div class="w-[calc(100%-24px)] text-[14px]">为确保您的账户安全，在您更改密码后，提现、C2C 出售和支付服务可能会被禁用 24 小时。
                            </div>
                        </div>
                        <div class="mt-[24px]">旧密码</div>
                        <div class="mt-[6px] relative">
                            <Input autocomplete="off" v-model="oldPwd" :type="showOldPwd ? 'text' : 'password'"
                                class=" tracking-[2px] pr-[50px]" placeholder="" />
                            <div class=" absolute w-[50px] h-full right-0 top-0 flex items-center justify-center">
                                <span @click="showOldPwd = !showOldPwd"
                                    class="iconfont cursor-pointer  text-[20px] text-[#9C9C9C]"
                                    :class="[showOldPwd ? 'icon-mimakejian' : 'icon-mimabukejian']"></span>
                            </div>
                        </div>
                        <div class="mt-[24px]">新密码</div>
                        <div class="mt-[6px] relative">
                            <Input autocomplete="off" v-model="newPwd" :type="showNewPwd ? 'text' : 'password'"
                                class=" tracking-[2px] pr-[50px]" placeholder="" />
                            <div class=" absolute w-[50px] h-full right-0 top-0 flex items-center justify-center">
                                <span @click="showNewPwd = !showNewPwd"
                                    class="iconfont cursor-pointer  text-[20px] text-[#9C9C9C]"
                                    :class="[showNewPwd ? 'icon-mimakejian' : 'icon-mimabukejian']"></span>
                            </div>
                        </div>
                        <div class="mt-[24px]">确认密码</div>
                        <div class="mt-[6px] relative">
                            <Input autocomplete="off" v-model="confirmPwd" :type="showConfirmPwd ? 'text' : 'password'"
                                class=" tracking-[2px] pr-[50px]" placeholder="" />
                            <div class=" absolute w-[50px] h-full right-0 top-0 flex items-center justify-center">
                                <span @click="showConfirmPwd = !showConfirmPwd"
                                    class="iconfont cursor-pointer  text-[20px] text-[#9C9C9C]"
                                    :class="[showConfirmPwd ? 'icon-mimakejian' : 'icon-mimabukejian']"></span>
                            </div>
                        </div>
                        <div class="mb-[32px] mt-[4px] text-[12px] text-[#f6465d]">{{ errorMsg }}</div>
                        <Button class="w-[calc(100%-20px)] h-[48px] leading-[48px] text-[16px] mt-[24px]"
                            @click="changePwd">确认</Button>
                    </div>
                </div>
            </template>
        </div>
        <ElDialog :show-close="false" width="425px" v-model="showCode">
            <template #header>
                <div class="mt-[24px] flex justify-end px-[8px]">
                    <span class="iconfont icon-guanbi text-[18px] cursor-pointer" @click="showCode = false"></span>
                </div>
            </template>
            <div class="px-[24px]">
                <div class="text-[32px] font-bold text-[#000]">关联验证器</div>
                <div class="mt-[16px] text-[#757575]">用验证器App扫描这个二维码</div>
                <div class="flex flex-col justify-center items-center my-[32px]">
                    <div
                        class="w-[180px] h-[180px] mb-[32px] border border-solid rounded-[8px] flex items-center justify-center border-[#ededed]">
                        <canvas ref="canvasEl"></canvas>
                    </div>
                    <div class="text-[#000] font-bold mb-[8px]">{{ code }}</div>
                    <div class="text-center text-[#757575]">如果您无法扫描这个二维码，请在App中手动输入这串字符</div>
                </div>
                <Button class="h-[48px] leading-[48px] mb-[24px] font-bold" @click="nextStep">下一步</Button>
            </div>
        </ElDialog>
        <ElDialog :show-close="false" width="425px" v-model="showConfirm">
            <template #header>
                <div class="mt-[24px] flex justify-end px-[8px]">
                    <span class="iconfont icon-guanbi text-[18px] cursor-pointer" @click="showConfirm = false"></span>
                </div>
            </template>
            <div class="px-[24px]">
                <div class="text-[32px] font-bold text-[#000]">验证身份验证器</div>
                <div class="mt-[16px] text-[#757575]">请输入验证器App生成的6位验证码。</div>
                <div class="my-[32px]">
                    <div class="text-[#000]">身份验证器App验证码</div>
                    <Input class="mt-[8px]" maxlength="6" placeholder="" v-model="confirmCode" />
                </div>
                <Button class="h-[48px] leading-[48px] mb-[224px] font-bold" @click="bind">提交</Button>
            </div>
        </ElDialog>
        <ElDialog :show-close="false" width="425px" v-model="showPhone">
            <template #header>
                <div class="mt-[24px] flex justify-end px-[8px]">
                    <span class="iconfont icon-guanbi text-[18px] cursor-pointer" @click="showPhone = false"></span>
                </div>
            </template>
            <div class="px-[24px]">
                <div class="text-[32px] font-bold text-[#000]">添加手机号</div>
                <div class="mt-[32px] mb-[24px]">
                    <div class="text-[#000]">请输入手机号</div>
                    <Input class="mt-[8px]" maxlength="15" placeholder="" v-model="phone" />
                </div>
                <div>
                    <div class="text-[#000]">请填写验证码</div>
                    <div class=" relative mt-[8px]">
                        <Input class=" pr-[110px]" maxlength="6" placeholder="" v-model="phoneCode" />
                        <div :class="[time > 0 ? 'block' : 'hidden']"
                            class="text-[14px] absolute w-[110px] right-0 text-center top-0 h-full leading-[48px] text-[#9c9c9c]">
                            验证码已发送
                        </div>
                        <div @click="getPhoneCode"
                            class="text-[14px] absolute w-[110px] cursor-pointer right-0 text-center top-0 h-full leading-[48px] text-primary-400"
                            :class="[time <= 0 ? 'block' : 'hidden']">获取验证码</div>
                    </div>
                </div>
                <div class="mb-[32px] mt-[4px] text-[12px] text-[#f6465d]">{{ errorMsg }}</div>
                <Button class="h-[48px] leading-[48px] mb-[124px] font-bold" @click="bindPhone">提交</Button>
            </div>
        </ElDialog>
        <ElDialog :show-close="false" width="360px" v-model="login" align-center :close-on-click-modal="false">
            <div class="flex flex-col items-center justify-center p-[8px]">
                <svg class="bn-svg bn-modal-confirm-icon w-16 h-16" viewBox="0 0 96 96"
                    xmlns="http://www.w3.org/2000/svg">
                    <path opacity="0.15"
                        d="M80.669 15.331c-10.935-10.934-28.663-10.934-39.597 0L24.1 32.301H7.13L63.697 88.87V71.9l16.97-16.972c10.935-10.934 10.935-28.662 0-39.597z"
                        fill="#929AA5"></path>
                    <path opacity="0.5"
                        d="M24.1 71.9c6.249 6.248 16.38 6.248 22.628 0L24.1 49.272c-6.248 6.249-6.248 16.38 0 22.628zM87.741 11.087L84.913 8.26l-5.708 5.708a28.377 28.377 0 012.829 2.828l5.707-5.708z"
                        fill="#929AA5"></path>
                    <path d="M29.758 26.645l39.597 39.597-5.657 5.657-39.597-39.597 5.657-5.657z" fill="#7dd3fc"></path>
                </svg>
                <div class="text-[20px] font-bold text-[#000] mb-[8px] mt-[15px]">密码修改成功</div>
                <div class="text-[14px] text-[#000] mb-[24px]">您的密码已修改成功，请使用新密码重新登录。</div>
                <Button class="w-[calc(100%-36px)] h-[40px] leading-[40px]" @click="router.push('/login')">登录</Button>
            </div>
        </ElDialog>
    </div>
</template>

<style scoped></style>